﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript" src="../DHTiny/DHTiny.js"></script>
    <script type="text/javascript" src="../DHTiny/DHDrag.js"></script>
    <script type="text/javascript" src="../DHTiny/DHTbForm.js"></script>
    <link rel="Stylesheet" type="text/css" href="../DHTiny/CSS/DHTbForm.css" />
<style type="text/css">
.chim {
    border: solid 1px red;
}
tr.chim {
   border: solid 1px blue;
}
</style>    
</head>
<body style="vertical-align:middle;">
<script type="text/javascript">
function Main() {
    var form = $dh.$new("table")
        .$dh.construct(DHTbForm,[document.body,{statusTxt: "Status text: --", captionTxt: "DHTbForm Class Demo", themeIndex: 3}])
        .$dh.css({bounds:[150,100,400,150], bg: "#ceefec"});

    form.title2.$dh.setDrag(form, [{mode:"MOVE", ghostDrag: true}]);
    form.title2.style.cursor = "move";
    
    var username = $dh.$new("input",{type:"text", size:[150,16]});
    var password = username.cloneNode(true);//$dh.set(password,username);
    form.body.$dh.addCh([$dh.$new("span", {html:"<b>Text 1</b>", size:[90,16]}),username, $dh.$new("br")]);
    form.body.$dh.addCh([$dh.$new("span", {html:"<b>Text 2</b>", size:[90,16]}),password]);
    $dh.$new("textarea",{value:"Hi! I'm a child element.", bg:"yellow",bounds:[5,-30,160,50,"relative"]}).$jump(form.body);
    
    $dh.$new("span",{html:"<br/>Drag the titlebar to move this<br/>"})
        .$dh.css({fontSize:"24px", color: "red"}).$jump(form.body);
    $dh.$new("button",{html:"View page's source script"}).$jump(form.body)
        .onclick = function() {
            if (form.done== true) return;
            var message= $dh.$new("div", {html:"<b>Page's source script:</b><br/>"+breakLine(),bg: "white", color:"purple"});
            form.body.$dh.addCh([$dh.$new("br"),message]);
            form.resizeTo(700,300);
            form.done = true;
        };
}
function breakLine() {return (""+Main).replace(/;/gi,"<br>").replace(/<br>/g,";<br/>");}
</script>    
 </body>
</html>
